<script setup>
import { ref } from 'vue'

const groupMode = ref('single') // 单人/多人模式
const groupName = ref('') // 小组名称
const studentName = ref('') // 学生姓名
const students = ref([]) // 学生列表

const joinGroup = () => {
  // 加入小组逻辑
}

const startTest = () => {
  // 开始测试逻辑
}
</script>

<template>
  <div class="student-group-view">
    <h1>学生分组</h1>
    
    <!-- 模式选择 -->
    <div class="mode-selector">
      <h2>请选择模式</h2>
      <el-radio-group v-model="groupMode">
        <el-radio label="single">单人模式</el-radio>
        <el-radio label="group">小组模式</el-radio>
      </el-radio-group>
    </div>
    
    <!-- 单人模式 -->
    <div class="single-mode" v-if="groupMode === 'single'">
      <el-input 
        v-model="studentName" 
        placeholder="请输入您的姓名"
        style="width: 300px; margin: 20px 0"
      />
      <el-button type="primary" @click="startTest">开始测试</el-button>
    </div>
    
    <!-- 小组模式 -->
    <div class="group-mode" v-else>
      <el-input 
        v-model="groupName" 
        placeholder="请输入小组名称"
        style="width: 300px; margin: 20px 0"
      />
      <el-input 
        v-model="studentName" 
        placeholder="请输入您的姓名"
        style="width: 300px; margin-bottom: 20px"
      />
      <el-button type="primary" @click="joinGroup">加入小组</el-button>
      
      <div class="student-list" v-if="students.length > 0">
        <h3>小组成员</h3>
        <ul>
          <li v-for="(student, index) in students" :key="index">
            {{ student }}
          </li>
        </ul>
        <el-button type="primary" @click="startTest">开始测试</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.student-group-view {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.mode-selector {
  margin-bottom: 30px;
}
.student-list {
  margin-top: 20px;
}
</style>